<template>
  <div ref="chartDom" style="width: 600px; height: 400px;"/>
</template>

<script setup>
import {nextTick, onMounted, onUnmounted, ref} from 'vue';
import * as echarts from 'echarts';

const chartDom = ref(null);
let chartInstance = null;

onMounted(async () => {
  await nextTick();
  chartInstance = echarts.init(chartDom.value);
  let option = {
    backgroundColor: "#fff",

    xAxis: {
      axisLine: {
        //  改变x轴颜色
        show: true,
        lineStyle: {
          color: "#F0EFEF",
          type: "solid",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
        //  改变x轴字体颜色和大小
        textStyle: {
          color: "#A3A9AF",
          fontSize: 12,
        },
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      typpe: "dashed",
      nameTextStyle: {
        color: "#A3A9AF",
        padding: [0, 25, 0, 0],
      },
      axisLine: {
        //  改变y轴颜色
        lineStyle: {
          color: "#F0EFEF",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        //  改变y轴字体颜色和大小
        //formatter: '{value} m³ ', //  给y轴添加单位
        textStyle: {
          color: "#A3A9AF",
          fontSize: 12,
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#E9E9E9",
          type: "dashed",
        },
      },
    },
    series: [
      {
        name: "首客订单率目标",
        type: "line",
        color: "#52AED0",
        symbol: "none",
        itemStyle: {
          normal: {
            lineStyle: {
              color: "#52AED0",
            },
          },
        },
        markLine: {
          animation: false,
          label: {
            formatter: "23.5%",
            align: "right",
            color: "#252525",
            distance: 15,
          },
          lineStyle: {
            type: "solid",
            color: "#52AED0",
          },
          tooltip: {
            formatter: "23.5%",
          },
          data: [
            [
              {
                coord: [0, 0],
                symbol: "none",
              },
              {
                coord: [14, 14],
                symbol: "none",
              },
            ],
          ],
        },
      },
      {
        name: "客流目标达成",
        type: "scatter",
        itemStyle: {
          color: "#77C620",
        },
        symbolSize: 6,
        data: [
          [10.0, 8.04],
          [8.0, 6.95],
          [13.0, 7.58],
          [9.0, 8.81],
          [11.0, 8.33],
          [14.0, 9.96],
          [6.0, 7.24],
          [4.0, 4.26],
          [12.0, 10.84],
          [7.0, 4.82],
          [5.0, 5.68],
        ],
      },
      {
        name: "客流目标未达成",
        type: "scatter",
        itemStyle: {
          color: "#F03024",
        },
        symbolSize: 6,
        data: [
          [9.0, 5.04],
          [11.0, 7.95],
          [12.0, 8.58],
          [5.0, 11.81],
          [7.0, 12.33],
          [11.0, 7.96],
          [7.0, 9.24],
          [6.0, 8.26],
          [10.0, 11.84],
          [7.0, 3.82],
          [6.0, 4.68],
        ],
      },
      {
        name: "",
        type: "line",
        markLine: {
          symbol: ["none", "triangle"],
          silent: true,
          lineStyle: {
            type: "solid",
            width: 1,
            color: "#6A8AFF",
          },
          label: {
            // show: false
            color: "red",
            distance: [-25, 8, 0, 0],
            padding: [-15, 2, 2, 3],
            formatter: function (params) {
              return params.name;
            },
          },
          data: [
            {name: "日均累客流量", yAxis: 7},
            {name: "日均累订单量", xAxis: 7},
          ],
        },
      },
    ],
  };
  chartInstance.setOption(option);
});

onUnmounted(() => {
  if (chartInstance != null && chartInstance.dispose) {
    chartInstance.dispose();
  }
});
</script>

<style scoped>

</style>